<!-- 文件监控 -->
<template>
<div>
    <el-button @click.native="doFileList">{{ $t('获取终端文件') }}</el-button>
    <el-button @click.native="refreshFileList">{{ $t('刷新文件列表') }}</el-button>
    <div class="none">{{ $t('当前没有终端文件信息') }}</div>
    <el-container>
      <el-main class="leftMainSmall">
        <bs-tree
          ref="asyncTree"
          :default-props="defaultProps"
          :default-checked-keys="defaultCheckedKeys"
          :default-expanded-keys="defaultExpandedKeys"
          :show-checkbox="false"
          :draggable="false"
          :filter-visible="false"
          :context-menu-visible="false"
          :context-menu-data="contextMenuData"
          :data="treeData"
          @node-click="nodeClick"
        ></bs-tree>
      </el-main>
     <el-main class="rightMainSmall">
        <!-- <el-table :data="tableData" border ref="tableDataRef" size="small" style="width: 100%" height="100%">
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="name" label="文件名"></el-table-column>
        </el-table> -->
        <list
            ref="tableDataRef"
            table-ref="filelist"
            class="center"
            :table-tag="tableName"
            style="width: 100%" 
            height="100%"
            :list-data="tableData"
            :has-select="false"
            :list-cols="colData"
            :init-cols-props.sync="initColsProps"
            :action-opts="actionOpts"
            @sort="handleSort"
        ></list>
      </el-main>
    </el-container>
</div>
    
</template>

<script>
import { Loading } from 'element-ui'
import DeviceMonitorApi from '@/api/device'
import List from '@/components/List'
import { mapGetters } from 'vuex'

export default {
    name: "FileMonitor",
    props: {
      id: {
        default: 0
      }
    },
    data() {
        const headerContextMenus = {
          width: '120px',
          items: [
              'sortUp',
              'sortDown',
          ]
        }
        const tableDataItem = { name: 'affd.tar.gz' };
        return {
            editorForm: {},
            allTableData:{},
            tableData: [],
            treeData: [],
            defaultCheckedKeys: [],
            defaultExpandedKeys: [-1],
            contextMenuData: [],
            loading: null,
            index:1,
            defaultProps: {
              label: "name",
            },
            colData: [
                { label: '文件名', prop: 'name',headerContextMenus},
            ],
            initColsProps: ['name'],
            actionOpts: {
                show: false,
            },
            tableName:'fileMonitorTable',

        }
    },
    components: {
      List
    },
    computed: {
      ...mapGetters(['fileData'])
    },
    methods: {
      // 点击节点
      nodeClick(data, node, obj) {
        // allTableData文件添加的时候id已经提前+1
        this.tableData = this.allTableData[data.id+1]
      },
      async doFileList() {
          if (this.loading === null) {
            this.loading = this.$loading({ fullscreen: true, text: '正在发送终端命令' })
          }
          this.editorForm.terminalId = this.id;
          const res = await DeviceMonitorApi.commandFileList(this.editorForm)
          console.log(res);
          if (this.loading) {
              this.loading.close()
              this.loading = null;
          }
          this.$alert('提示', 'sendPromptOfFileInfo')
        },
        refreshFileList(){
          const res = eval('(' + this.fileData + ')')
          var jsonArr = eval(res)
          this.tableData = []
          this.allTableData = {}
          this.treeData = []
          this.index = 1
          if(jsonArr) {
            this.getTreeData(jsonArr.list, this.treeData)
          }
        },
        getTreeData(data,tagArray,index) {
          if(!data) {
            return
          }
          for(var i = 0;i<data.length;i++) {
            if(typeof data[i] == 'object') {
              for(var key in data[i]) {
                var object = {}
                object.id = this.index
                object.name = key
                object.children = []
                tagArray.push(object)
                this.index++
                this.getTreeData(data[i][key],object.children)
              }
            } else {
              //如果是字符串就是文件添加进allTableData
              var obj = {}
              obj.id = this.index
              obj.name = data[i]
              if(Object.prototype.hasOwnProperty.call(this.allTableData, this.index)) {
                this.allTableData[this.index].push(obj)
              } else {
                this.allTableData[this.index] = [obj]
              }
            }
          }
        },
        // 排序
        handleSort(sortInfo) {
          if(sortInfo.type == 'ASC') {
              this.$refs.tableDataRef.$refs.filelist.sort(sortInfo.prop,'ascending');
          } else {
              this.$refs.tableDataRef.$refs.filelist.sort(sortInfo.prop,'descending');
          }
        },
    }
}


</script>

<style lang="scss" scoped>
.el-button{margin-right:10px;font-size: 13px;}
.none{font-size:13px;display: inline-block;margin-left: 10px;}
</style>